<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-09-02 11:01:49
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2025-04-14 10:10:30
 * @Description: 
 * @FilePath: \charging-admin\src\views\index.vue
-->
<template>
  <div class="app-container">
    <!-- 第一部分 -->
    <div class="stat-row row-1">
      <!-- 运营统计 -->
      <el-card class="card-1">
        <div slot="header" class="clearfix">
          <div class="card-title">运营统计</div>
        </div>
        <div class="card-1-content">
          <!-- 全部营收 -->
          <div class="total-income">
            <div class="total-income__label">全部营收(元)</div>
            <div class="total-income__value">
              <span>{{ info1.totalRevenue / 100 }}</span>
              <div class="total-income__today">
                今日营收{{ info1.revenueToday / 100 }}元
              </div>
            </div>
          </div>
          <!-- 运营详情 -->
          <el-descriptions direction="vertical" :column="3" label-class-name="my-label">
            <!-- <el-descriptions-item label="套餐收入">
              <Value value="0" unit="元" decimal="2" />
            </el-descriptions-item> -->
            <el-descriptions-item label="实体卡收入">
              <Value :value="info1.shareAmountCard / 100" unit="元" decimal="2" />
            </el-descriptions-item>
            <el-descriptions-item label="充电收入">
              <Value :value="info1.shareAmount / 100" unit="元" decimal="2" />
            </el-descriptions-item>
            <el-descriptions-item label="充电总次数">
              <Value :value="info1.chargeCount" unit="次" decimal="0" />
            </el-descriptions-item>
            <!-- <el-descriptions-item label="套餐订单数">
              <Value value="0" unit="个" decimal="0" />
            </el-descriptions-item> -->
            <!-- <el-descriptions-item label="投币机收入">
              <Value value="0" unit="元" decimal="2" />
            </el-descriptions-item> -->
          </el-descriptions>
          <el-descriptions direction="vertical" :column="3" label-class-name="my-label">
            <!-- <el-descriptions-item label="今日套餐收入">
              <Value value="0" unit="元" decimal="2" />
            </el-descriptions-item> -->
            <el-descriptions-item label="今日实体卡收入">
              <Value :value="info1.shareAmountCardToday / 100" unit="元" decimal="2" />
            </el-descriptions-item>
            <el-descriptions-item label="今日充电收入">
              <Value :value="info1.shareAmountToday / 100" unit="元" decimal="2" />
            </el-descriptions-item>
            <el-descriptions-item label="今日充电次数">
              <Value :value="info1.chargeCountToday" unit="次" decimal="0" />
            </el-descriptions-item>
            <!-- <el-descriptions-item label="今日套餐个数">
              <Value value="0" unit="个" decimal="0" />
            </el-descriptions-item> -->
          </el-descriptions>
        </div>
      </el-card>
      <div class="row-1__right">
        <el-card class="card-2">
          <div slot="header" class="clearfix">
            <div class="card-title">站点信息</div>
          </div>
          <el-descriptions direction="vertical" :column="2" label-class-name="my-label">
            <el-descriptions-item label="站点数">
              <Value :value="info1.totalStationCount" unit="个" />
            </el-descriptions-item>
            <el-descriptions-item label="充电桩个数">
              <Value :value="info1.totalChargeDeviceCount" unit="个" />
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="card-3">
          <div slot="header" class="clearfix">
            <div class="card-title" @click="toFeedback">投诉反馈</div>
          </div>
          <el-descriptions direction="vertical" :column="2" label-class-name="my-label">
            <el-descriptions-item label="投诉反馈数">
              <Value style="cursor: pointer;" :value="info1.totalFeedbackCount" unit="个" @click="toFeedback" />
            </el-descriptions-item>
            <el-descriptions-item label="未处理投诉反馈数">
              <Value style="cursor: pointer;" :value="info1.totalUntreatedFeedbackCount" unit="个" @click="toFeedback" />
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="stat-row row-2">
      <el-card class="card-4">
        <div slot="header" class="clearfix">
          <div class="card-title">设备状态</div>
        </div>
        <div class="card-4-content">
          <div id="deviceChart" ref="deviceChart" style="width: 50%; height: 300px"></div>
          <div id="deviceChart2" ref="deviceChart2" style="width: 50%; height: 300px"></div>
        </div>
      </el-card>
      <el-card class="card-5">
        <div slot="header" class="clearfix">
          <div class="card-title">设备报警/故障</div>
        </div>
        <div class="card-5-content">
          <div v-if="alarmList.length" class="alarm-list">
            <div class="alarm-item" v-for="item in alarmList">
              <span>{{ item.siteName }}</span>
              <span>({{ item.stationName }} {{ item.deviceSerialNum }})</span>
              <span>{{ item.createTime }}</span>
              <span>发生{{ item.reasonDesc }}</span>
            </div>
          </div>
          <div v-else class="no-alarm">暂无设备报警/故障数据</div>
        </div>
      </el-card>
    </div>
    <!-- 第三部分 -->
    <div class="stat-row row-3">
      <el-card class="card-6">
        <div slot="header" class="clearfix">
          <div class="card-title">充电活跃度分析</div>
        </div>
        <div id="chargeChart" ref="chargeChart" style="width: 100%; height: 300px"></div>
      </el-card>
      <el-card class="card-7">
        <div slot="header" class="clearfix">
          <div class="card-title">预购实体卡分布情况</div>
        </div>
        <el-descriptions direction="vertical" :column="1" label-class-name="my-label">
          <el-descriptions-item label="实体卡数量">
            <Value :value="info1.cardAmountSaleCount" unit="个" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <!-- 第四部分 -->
    <div class="stat-row row-4">
      <el-card class="card-8">
        <div slot="header" class="clearfix">
          <div class="card-title">收入趋势</div>
        </div>
        <div class="card-8-content">
          <div id="incomeChart" ref="incomeChart" style="width: 50%; height: 300px"></div>
          <div class="income-top5">
            <div class="income-top5__header">
              <div class="income-top5__title">近30天收入金额TOP5</div>
              <div class="income-top5__switch">
                <el-radio-group v-model="incomeTopType">
                  <el-radio-button :label="1">站点</el-radio-button>
                  <el-radio-button :label="2">充电桩</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="income-top5__content">
              <div class="income-top5__item" v-for="(item, index) in incomeTopList">
                <div class="top-item__label ellipsis">{{ item.name }}</div>
                <el-progress class="top-item__progress" :show-text="false" :stroke-width="16"
                  :percentage="(item.number / item.totalNumber) * 100"></el-progress>
                <div class="top-item__num">{{ item.number / 100 }}元</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 第五部分 -->
    <div class="stat-row row-5">
      <el-card class="card-9">
        <div slot="header" class="clearfix">
          <div class="card-title">充电次数趋势</div>
        </div>
        <div class="card-9-content">
          <div id="timesChart" ref="timesChart" style="width: 50%; height: 300px"></div>
          <div class="income-top5">
            <div class="income-top5__header">
              <div class="income-top5__title">近30天充电次数Top5</div>
              <div class="income-top5__switch">
                <el-radio-group v-model="timesTopType">
                  <el-radio-button :label="1">站点</el-radio-button>
                  <el-radio-button :label="2">充电桩</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="income-top5__content">
              <div class="income-top5__item" v-for="(item, index) in timesTopList">
                <div class="top-item__label ellipsis">{{ item.name }}</div>
                <el-progress class="top-item__progress" :show-text="false" :stroke-width="16"
                  :percentage="(item.number / item.totalNumber) * 100"></el-progress>
                <div class="top-item__num">{{ item.number }}次</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getStat1API,
  getStat2API,
  getStat3API,
  getStat4API,
  getStat5API,
  getStat6API,
  getStat7API,
  getStat8API,
  getStat9API,
  getStat10API,
} from "@/api/charge/stat";
import Value from "@/components/Value";
import * as echarts from "echarts";

export default {
  name: "Index",
  components: { Value },
  data() {
    return {
      info1: {},

      // 设备饼图option
      deviceOption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["在线设备", "离线设备", "未注册设备"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "在线设备" },
              { value: 0, name: "离线设备" },
              { value: 0, name: "未注册设备" },
            ],
            color: ["#67C23A", "#F56C6C", "#909399"],
          },
        ],
      },
      deviceOption2: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["yellow"],
        legend: {
          orient: "vertical",
          left: 10,
          data: ["正常设备", "故障设备"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            lineStyle: {
              color: "blue",
            },
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "正常设备" },
              { value: 0, name: "故障设备" },
            ],
            color: ["#67C23A", "#F56C6C"],
          },
        ],
      },
      deviceChart: null,
      deviceChart2: null,

      // 充电活跃度折线图
      chargeOption: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var result = "";
            params.forEach(function (item) {
              console.log(item);
              result += item.axisValue + "</br>" + item.marker + item.data;
            });
            return result;
          },
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          name: "充电次数",
          type: "value",
          axisLabel: {
            formatter: "{value} 次",
          },
        },
        series: [
          {
            data: [],
            type: "line",
            color: ["#409EFF"],
          },
        ],
      },
      chargeChart: null,

      // 收入趋势折线图
      incomeOption: {
        color: ["#409EFF", "#67C23A"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["实体卡", "充电"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          name: "收入",
          type: "value",
          axisLabel: {
            formatter: "{value} 元",
          },
        },
        series: [
          {
            name: "实体卡",
            type: "line",
            stack: "总量",
            data: [],
          },
          {
            name: "充电",
            type: "line",
            stack: "总量",
            data: [],
          },
        ],
      },
      incomeChart: null,
      incomeTopType: 1, // 1站点 2充电桩
      incomeTopList: [],

      // 充电次数趋势折线图
      timesOption: {
        color: ["#409EFF"],
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          name: "充电次数",
          type: "value",
          axisLabel: {
            formatter: "{value} 次",
          },
        },
        series: [
          {
            data: [],
            name: "充电次数",
            type: "line",
          },
        ],
      },
      timesChart: null,
      timesTopType: 1, // 1站点 2充电桩
      timesTopList: [],

      alarmList: [],
    };
  },
  watch: {
    incomeTopType(val) {
      this.getIncomeTop5(val);
    },
    timesTopType(val) {
      this.getChargeTimesTop5(val);
    },
  },
  created() {
    this.getStat1();
    this.getAlarmList();
    this.getIncomeTop5(1);
    this.getChargeTimesTop5(1);
  },
  mounted() {
    this.getDeviceChartData(); // 设备状态
    this.getChangeLivenessData(); // 充电活跃度
    this.getIncomeData(); // 收入趋势
    this.getChargeTimesData(); //充电次数

    window.onresize = () => {
      this.resizeCharts();
    };
  },
  methods: {
    toFeedback() {
      console.log('123123123')
      this.$router.push({
        path: "/feedback",
      });
    },
    resizeCharts() {
      if (this.deviceChart) this.deviceChart.resize();
      if (this.deviceChart2) this.deviceChart2.resize();
      if (this.chargeChart) this.chargeChart.resize();
      if (this.incomeChart) this.incomeChart.resize();
      if (this.timesChart) this.timesChart.resize();
    },
    // 获取故障列表
    getAlarmList() {
      getStat3API({
        pageNum: 1,
        pageSize: 20,
      }).then((res) => {
        console.log("故障列表数据", res);
        this.alarmList = res.rows;
      });
    },
    // 运营统计 站点信息 投诉反馈
    getStat1() {
      getStat1API().then((res) => {
        this.info1 = res.data;
      });
    },
    // 设备状态饼图数据获取
    getDeviceChartData() {
      getStat2API().then((res) => {
        console.log("res", res);
        this.deviceOption.series[0].data[0].value = res.data.onlineCount || 0; // 在线设备
        this.deviceOption.series[0].data[1].value = res.data.offLineCount || 0; // 离线设备
        this.deviceOption.series[0].data[2].value =
          res.data.undefindeCount || 0; // 未注册设备
        this.deviceOption2.series[0].data[0].value = res.data.normalCount || 0; // 正常设备
        this.deviceOption2.series[0].data[1].value = res.data.faultCount || 0; // 故障设备

        this.createDeviceChart();
      });
    },
    // 收入趋势数据获取
    getIncomeData() {
      getStat5API().then((res) => {
        let cardList = res.data.cardList;
        let chargeList = res.data.chargeList;
        let maxLength = Math.max(cardList.length, chargeList.length);
        console.log("maxLength", maxLength);
        for (let i = 0; i < maxLength; i++) {
          this.incomeOption.xAxis.data.push(
            (cardList[i] || chargeList[i]).timeString
          );
          this.incomeOption.series[0].data.push(
            cardList[i] ? cardList[i].number / 100 : 0
          );
          this.incomeOption.series[1].data.push(
            chargeList[i] ? chargeList[i].number / 100 : 0
          );
        }
        this.createIncomeChart();
      });
    },
    // 获取充电活跃度
    getChangeLivenessData() {
      getStat4API().then((res) => {
        console.log("充电活跃度", res.data);
        res.data.forEach((item) => {
          this.chargeOption.xAxis.data.push(item.timeString);
          this.chargeOption.series[0].data.push(item.chargingCount);
        });

        this.createChargeChart();
      });
    },
    // 获取充电次数趋势
    getChargeTimesData() {
      getStat6API().then((res) => {
        console.log("充电次数趋势", res.data.chargeList);
        let list = res.data.chargeList || [];
        list.forEach((item) => {
          this.timesOption.xAxis.data.push(item.timeString);
          this.timesOption.series[0].data.push(item.number);
        });

        this.createTimesChart();
      });
    },
    // 创建设备饼图
    createDeviceChart() {
      this.deviceChart = echarts.init(document.getElementById("deviceChart"));
      this.deviceChart.setOption(this.deviceOption);
      this.deviceChart2 = echarts.init(document.getElementById("deviceChart2"));
      this.deviceChart2.setOption(this.deviceOption2);
    },
    // 创建充电活跃度折线图
    createChargeChart() {
      this.chargeChart = echarts.init(document.getElementById("chargeChart"));
      this.chargeChart.setOption(this.chargeOption);
    },
    // 创建收入趋势折线图
    createIncomeChart() {
      this.incomeChart = echarts.init(document.getElementById("incomeChart"));
      this.incomeChart.setOption(this.incomeOption);
    },
    // 创建充电次数趋势折线图
    createTimesChart() {
      this.timesChart = echarts.init(document.getElementById("timesChart"));
      this.timesChart.setOption(this.timesOption);
    },
    // 收入top5
    getIncomeTop5(type) {
      let api = type === 1 ? getStat7API : getStat8API; // 1站点 2充电桩
      api().then((res) => {
        console.log("收入top5", res);
        this.incomeTopList = res.data;
      });
    },
    // 充电次数top5
    getChargeTimesTop5(type) {
      let api = type === 1 ? getStat9API : getStat10API; // 1站点 2充电桩
      api().then((res) => {
        console.log("充电次数top5", res);
        this.timesTopList = res.data;
      });
    },
  },
};
</script>
<style>
.my-label {
  padding-bottom: 0 !important;
}
</style>
<style scoped lang="scss">
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-row {
  display: flex;
  align-items: center;

  .card-title {
    position: relative;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 18px;
    color: #303133;
    font-weight: bold;

    &:after {
      content: "";
      position: absolute;
      background: #409eff;
      width: 4px;
      height: 15px;
      top: 50%;
      left: -6px;
      transform: translate(-100%, -50%);
    }
  }

  &.row-1 {
    margin-bottom: 20px;

    .card-1 {
      flex: auto;
      width: 70%;
      margin-right: 20px;

      .total-income {
        margin-bottom: 10px;

        .total-income__value {
          display: flex;
          align-items: center;

          span {
            font-size: 60px;
            font-weight: bold;
          }

          .total-income__today {
            height: 36px;
            border-radius: 18px;
            color: #0070ff;
            background-color: rgba(166, 210, 255, 0.2);
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            margin-left: 20px;
          }
        }
      }
    }

    .row-1__right {
      width: 30%;
      height: 320px;

      display: flex;
      flex-direction: column;
    }

    .card-2 {
      flex: auto;
      margin-bottom: 20px;
    }

    .card-3 {
      flex: auto;
    }
  }

  &.row-2 {
    margin-bottom: 20px;

    .card-4 {
      flex: auto;
      width: 70%;
      margin-right: 20px;

      .card-4-content {
        display: flex;
        align-items: center;
      }
    }

    .card-5 {
      flex: auto;
      width: 30%;
      height: 388px;

      .card-5-content {
        display: flex;
        align-items: center;

        .alarm-list {
          display: flex;
          flex-direction: column;
          overflow: auto;
          width: 100%;
          height: 300px;

          .alarm-item {
            margin: 10px 0;
            font-size: 14px;
          }
        }

        .no-alarm {
          width: 100%;
          font-size: 14px;
          text-align: center;
          color: #999;
          margin-top: 120px;
        }
      }
    }
  }

  &.row-3 {
    margin-bottom: 20px;

    .card-6 {
      flex: auto;
      width: 70%;
      margin-right: 20px;
    }

    .card-7 {
      flex: auto;
      width: 30%;
      height: 388px;
    }
  }

  &.row-4 {
    margin-bottom: 20px;

    .card-8 {
      width: 100%;

      .card-8-content {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  &.row-5 {
    padding-bottom: 20px;

    .card-9 {
      width: 100%;

      .card-9-content {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .income-top5 {
    flex: none;
    width: 40%;
    margin-left: 20px;

    .income-top5__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .income-top5__title {
        font-size: 18px;
        font-weight: bold;
      }

      .income-top5__switch {}
    }

    .income-top5__content {
      height: 240px;
      display: flex;
      flex-direction: column;

      .income-top5__item {
        display: flex;
        align-items: center;
        margin: 10px 0;

        .top-item__label {
          flex: none;
          width: 35%;
          margin-right: 10px;
          text-align: right;
        }

        .top-item__progress {
          flex: auto;
          width: 60%;
        }

        .top-item__num {
          flex: none;
          width: 100px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
